<template>
	<el-tabs v-model="activeaddName" @tab-click="handleaddClick">
		<el-tab-pane label="周期类" name="first">
			<br />
			<div class="left">
				<span class="lab">计费项目</span>
				<div class="show">
					<el-radio-group v-model="op">
						<div class="radio-wrapper">
							<el-radio v-for="item in billingItems" :key="item.billingltems_id"
								:label="item.billingltems_id" :value="item.billingltems_id">
								{{ item.jifeiname }}
							</el-radio>
						</div>
					</el-radio-group>
				</div>
				<!-- <router-link to="/chuangJianJiFeiXiangMu" class="bottom-left-link">+新增计费项目</router-link> -->
				<el-button class="bottom-left-link" @click="tiaozhuang">+新增计费项目</el-button>
				<a href="#" class="bottom-right-link">费用生成记录</a>
			</div>

			<div class="rigth">
				<el-form-item label="费用编号" label-width="120px" style="width: 480px;" >
					<el-input v-model="fyxq.number" placeholder="Approved by" clearable />
				</el-form-item>


				<el-form-item label="关联房屋" label-width="120px" style="width: 480px;">
					<el-cascader v-model="lastNumber.xz" :options="options" :props="props1" clearable />
				</el-form-item>

				<el-form-item label="起止时间" label-width="120px" style="width: 480px;" >
					<el-input v-model="fyxq.fyqz_time" placeholder="Approved by" clearable />
				</el-form-item>

				<el-form-item label="费用所属月" label-width="120px" style="width: 480px;" >
					<el-date-picker v-model="fyxq.fyssy" type="month" value-format="YYYY-MM-DD HH:mm:ss" placeholder="费用所属月" />
				</el-form-item>


				<el-form-item label="费用金额" label-width="120px" style="width: 480px;" >
					<el-input v-model="fyxq.jine" placeholder="Approved by" clearable />
				</el-form-item>

				<el-form-item label="应付金额" label-width="120px" style="width: 480px;" >
					<el-input v-model="fyxq.yingfujine" placeholder="Approved by" clearable />
				</el-form-item>

				<el-form-item label="费用状态" label-width="120px" style="width: 480px;" >
					<el-select v-model="fyxq.state" placeholder="请选择车位类型">
						<el-option label="未付款" value="未付款"></el-option>
					</el-select>
				</el-form-item>

				<div class="conmit">
					<el-button class="but1">取消</el-button>
					<el-button class="but2" @click="addfyxq">确定</el-button>
				</div>
			</div>
		</el-tab-pane>

	</el-tabs>
</template>
<script lang="ts" setup>
	import { ref, reactive, onMounted } from 'vue'
	import type { TabsPaneContext } from 'element-plus'
	import { useRouter } from 'vue-router'
	import $http from '../router/AxiosApi.js';
	const router = useRouter()

	const activeaddName = ref('first')
	const op = ref(null);

	// 使用 reactive 来定义 data
	const data = reactive({
		house: []
	});
	
	const fyxq = reactive({
		billingltems_id:null,
		number:"",
		fyssy:"",
		fyqz_time:"",
		jine:"",
		yingfujine:"",
		state:""
	});
	
	const addfyxq = ()=>{
		fyxq.billingltems_id = op.value;
		console.log(fyxq)
		
		$http.post("FeiYong/addFeiYong",fyxq).then((res)=>{
			Object.assign(fyxq, res.data);
			console.log(fyxq);
			
			$http.get("FeiYong/selectmax").then((res)=>{
				const maxid = res.data.data;  // 从响应中获取 ID
				console.log("max", maxid);
				
				// 创建 form 对象并设置值
				const form = reactive({
					houseId: '',
					unitId: '',
					buildingId: '',
					regionId: '',
					billingItemsName: ''
				});
				if (lastNumber.xz === undefined) {
					console.log("未选择");
					form.buildingId = '';
					form.houseId = '';
					form.regionId = '';
					form.unitId = '';
				} else {
					form.regionId = lastNumber.xz[0]; // 第一个选项作为 regionId
					if (lastNumber.xz.length >= 2) {
						form.buildingId = lastNumber.xz[1]; // 第二个选项作为 buildingId
					}
					if (lastNumber.xz.length >= 3) {
						form.unitId = lastNumber.xz[2]; // 第三个选项作为 unitId
					}
					if (lastNumber.xz.length >= 4) {
						form.houseId = lastNumber.xz[3]; // 第四个选项作为 houseId
					}
				}
				console.log("houseId", form.unitId);
				
				const fromaddlianjie = {
					cost_id: maxid,  // 直接使用 ID 值
					housid: form.unitId  // 直接使用值
				};
				console.log(fromaddlianjie);
				$http.post("FeiYong/addfwfyconnect", fromaddlianjie).then((res) => {
					Object.assign(fromaddlianjie, res.data);
					console.log(fromaddlianjie);
				});
				
			})
		})
		
	}
	
	

	const handleaddClick = (tab : TabsPaneContext, event : Event) => {
		console.log(tab, event)
	}

	const tiaozhuang = () => {
		router.push({ name: 'chuangJianJiFeiXiangMu' });
	}

	onMounted(() => {
		loadAll();
	});

	const billingItems = ref([]);

	$http.get("FeiYong/selectname").then((res) => {
		billingItems.value = res.data.data;
		console.log(billingItems)
		
	})

	const lastNumber = reactive({
		xz: ''
	})



	const props1 = {
		checkStrictly: true,
	}
	const options = reactive([]);

	const loadAll = () => {
		$http.get("Parking/HousfindAll").then((res) => {
			// 假设数据在 res.data.data 数组中
			data.house = res.data.data || []; // 确保 data.house 是数组
			console.log("Fetched house data:", data.house);

			if (Array.isArray(data.house)) {
				const regions = data.house.map(house => ({
					value: house.regionId,
					label: house.regionName,
					children: [
						{
							value: house.buildingId,
							label: house.buildingName,
							children: [
								{
									value: house.unitId,
									label: house.unitName,
									children: [
										{
											value: house.houseId,
											label: house.houseNumber
										}
									]
								}
							]
						}
					]
				}));
				// 更新 options 数组
				options.splice(0, options.length, ...regions);
				console.log("Updated options:", options);
			} else {
				console.error('Expected data.house to be an array, but it is not.');
			}
		}).catch((error) => {
			console.error('API call failed:', error);
		});
	};


</script>

<style scoped>
	.left {
		border: 2px solid gainsboro;
		width: 360px;
		height: 580px;
		border-radius: 10px;
		float: left;
	}

	.rigth {
		border: 2px solid gainsboro;
		width: 1020px;
		height: 620px;
		border-radius: 10px;
		margin-left: 380px;

		/* Flexbox布局 */
		display: flex;
		flex-direction: column;
		/* 垂直方向排列子元素 */
		justify-content: center;
		/* 垂直方向居中对齐 */
		align-items: center;
		/* 水平方向居中对齐 */
		box-sizing: border-box;
		/* 包括边框和内边距在元素总宽度和高度中 */
	}

	.bottom-left-link {
		position: absolute;
		bottom: 48px;
		/* 距离底部的距离 */
		left: 10px;
		/* 距离左侧的距离 */
	}

	.bottom-right-link {
		position: absolute;
		bottom: 52px;
		/* 距离底部的距离 */
		right: 1110px;
		/* 距离右侧的距离 */
	}

	.show {
		border: 2px solid black;
		border-radius: 10px;
		width: 260px;
		margin-top: 36px;
		margin-left: 28px;
		height: 450px;
		text-align: left;
		padding: 10px;
		/* 可选：添加一些内边距以使其与其他内容分隔 */
		padding-left: 36px;
		max-height: 450px;
		/* 设置最大高度以控制溢出效果 */
		overflow-y: auto;
		/* 添加垂直滚动条 */
	}


	/* 确保单选框垂直排列 */
	.radio-wrapper {
		display: flex;
		flex-direction: column;
		margin-top: 20px;
	}
</style>